<template>
  <div>
    <!--物料待审核-->
    <SectionContainer class="u-p20">
      <SectionTitle>物料待审核</SectionTitle>

      <!-- 筛选 start -->
      <el-form
        class="m-filter"
        inline
      >
        <el-form-item>
          <el-input
            size="small"
            placeholder="请输入账户名称"
            v-model="filter.accountName"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            type="primary"
            @click="search"
          >查询</el-button>
        </el-form-item>
      </el-form>

      <!-- 表格 -->
      <TableFull
        :data="tableData"
        :total="tableTotal"
        :current-page="page.pageNo"
        @current-change="currentChange"
        @size-change="sizeChange"
        @selection-change="tableSelectionChange"
      >
        <el-form
          slot="handle"
          class="m-filter"
          inline
        >
          <el-form-item>
            <el-button
              size="small"
              @click="auditPass"
            >内部审核通过</el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              @click="openAuditUnpass"
            >内部审核拒绝</el-button>
          </el-form-item>
        </el-form>
        <template slot="column">
          <el-table-column
            :resizable="false"
            align="center"
            width="40"
            type="selection"
          ></el-table-column>
          <el-table-column
            :resizable="false"
            align="center"
            label="操作"
            width="120"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="$router.push({
                  name: 'other-creative-audit-detail',
                  query: {
                    referrer: 'other-creative-audit',
                    creativeId: scope.row.creativeId
                  }
                })"
              >审核</el-button>
            </template>
          </el-table-column>
          <el-table-column
            :resizable="false"
            align="center"
            v-for="(item, index) in tableColumn"
            :key="index"
            :prop="item.prop"
            :width="item.width"
            :label="item.label"
          >
            <template slot-scope="scope">
              <!-- 创意类型 -->
              <template v-if="item.prop === 'creativeType'">
                {{mapValue(GENERALIZE_CREATIVITY_TYPE, scope.row.creativeType)}}
              </template>
              <!-- 日期 -->
              <template v-else-if="item.prop === 'submitTime'">
                <span v-html="formatMultiLineTime(scope.row.submitTime)"></span>
              </template>
              <!-- 其他 -->
              <template v-else>{{scope.row[item.prop]}}</template>
            </template>
          </el-table-column>
        </template>
      </TableFull>
    </SectionContainer>

    <!-- 审核拒绝 -->
    <AuditReject
      :visible.sync="auditUnpassVisible"
      :list="auditUnpassRejectList"
      @confirm="auditUnpass"
    ></AuditReject>
  </div>
</template>

<script>
import SectionContainer from "@/components/section-container";
import SectionTitle from "@/components/section-title";
import TableFull from "@/components/table-full";

import AuditReject from "../components/audit-reject";

import { formatMultiLineTime, mapValue } from "@/utils";
import { GENERALIZE_CREATIVITY_TYPE } from "@/assets/js/common-option";

import {
  fetchOtherCreativeAuditUnfinished,
  fetchOtherCreativeAuditPass,
  fetchOtherCreativeAuditUnpass
} from "@/api";

import permissionMixin from "@/mixins/permission";

export default {
  mixins: [permissionMixin],
  components: {
    SectionContainer,
    SectionTitle,
    TableFull,
    AuditReject
  },
  data() {
    return {
      GENERALIZE_CREATIVITY_TYPE,

      auditUnpassVisible: false,
      auditUnpassRejectList: [], // 拒绝原因

      filter: {
        accountName: ""
      },

      tableColumn: [
        {
          label: "审核ID",
          prop: "auditId"
        },
        {
          label: "账户名称",
          prop: "accountName"
        },
        {
          label: "登录账号",
          prop: "loginName"
        },
        {
          label: "创意名称",
          prop: "creativeName"
        },
        {
          label: "创意ID",
          prop: "creativeId"
        },
        {
          label: "创意类型",
          prop: "creativeType"
        },
        {
          label: "提交时间",
          prop: "submitTime"
        }
      ],
      tableData: [],
      tableSelectionData: [],
      tableTotal: 0,
      page: {
        pageNo: 1,
        pageSize: 50
      }
    };
  },
  computed: {
    // 拼接选中的数据
    checkedTableData() {
      return this.tableSelectionData.map(item => item.creativeId);
    }
  },
  methods: {
    formatMultiLineTime,
    mapValue,

    // 审核通过
    auditPass() {
      if (!this.checkedTableData.length) {
        return this.$message({
          message: "请选择需要审核的物料",
          duration: 2000
        });
      }
      fetchOtherCreativeAuditPass({
        query: {
          creativeIds: this.checkedTableData.join()
        }
      }).then(() => {
        this.$message({
          message: "操作成功",
          duration: 1000
        });
        this.search();
      });
    },
    // 审核拒绝
    openAuditUnpass() {
      if (!this.checkedTableData.length) {
        return this.$message({
          message: "请选择需要审核的物料",
          duration: 2000
        });
      }
      this.auditUnpassVisible = true;
    },
    auditUnpass(reject) {
      fetchOtherCreativeAuditUnpass({
        query: {
          creativeIds: this.checkedTableData.join(),
          refuseReason: reject.join("\n")
        }
      }).then(() => {
        this.$message({
          message: "操作成功",
          duration: 1000
        });
        this.auditUnpassVisible = false;
        this.search();
      });
    },
    // 重置
    search() {
      this.page.pageNo = 1;
      this.getTable();
    },
    // 列表
    getTable() {
      this.tableData = [];
      this.tableTotal = 0;
      fetchOtherCreativeAuditUnfinished({
        query: {
          ...this.page,
          accountName: this.filter.accountName
        }
      }).then(res => {
        this.tableTotal = res.data.listCount;
        this.tableData = res.data.list || [];
      });
    },
    // 表格多选
    tableSelectionChange(val) {
      this.tableSelectionData = val;
    },
    // 分页
    currentChange(val) {
      this.page.pageNo = val;
      this.getTable();
    },
    sizeChange(val) {
      this.page.pageSize = val;
      this.getTable();
    }
  },
  created() {
    this.getTable();
  }
};
</script>